فرض کنيد به سال ???? رفته باشيم، چه مهارت شغلي ضروري خواهد بود؟ کد نويسي!اگرچه ممکن است در دهه بعدي خبري از HTML يا CSS نباشد اما موضوع اين است که کدنويسي در آينده فوق العاده مهم خواهد بود و فرقي نمي کند در چه قسمتي بخواهيد از آن بهره ببريد.

 

يادگيري برنامه نويسي مي تواند در خانه يا مدرسه صورت بگيرد، گذراندن طراحی دوره هاي تحصيلي مدارس و دانشگاه ها اغلب پرهزينه و زمان بر است در حالي که خواندن کتاب يا طي کردن کلاس هاي آنلاين هم ارزانتر بوده و هم وقت زيادي از شما نخواهد گرفت.

 

چرا بايد کد نويسي را ياد بگيريد و از کجا بايد شروع کنيد؟

 

اشر هانت، يک طراح و برنامه نويس مطرح، معتقد است يادگيري HTML و CSS مي تواند براي طراحان وب فوق العاده ارزشمند باشد. او پيشنهاد مي کند براي يادگيري کليدهاي  CSS با syntax و انيميشن هاي مرورگر وب شروع کنيد. اين کار باعث مي شود تا علاوه بر درک اين زبان ها، از محدوديت هاي آنها نيز مطلع شويد و قابليت هاي کلي آنها را شناسايي کنيد.

 

C.J. Windisch به عنوان يکي از اعضاي اصلي تيم طراحي برنامه مکان يابي  GoaBe مي گويد : ارزش کدنويسي در اين است که ياد بگيريد چگونه با استفاده از داده ها تصميم گيري کنيد. از تحليل هاي آماري بازي بيسبال گرفته تا تيم انتخاباتي باراک اوباما شما بايد از کدنويسي براي انجام محاسبات استفاده کنيد.

 

وينديش توصيه مي کند تا از وب سايت هايي نظير Treehouse که آموزش هاي ويديويي در سطح ابتدايي را ارائه مي کنند استفاده کنيد.

 

مايک موراي يکي ديگر از اعضاي تيم برنامه نويسي GoaBe مي گويد : چيره شدن بر کدنويسي به برنامه نويس اين امکان را مي دهد تا تکنولوژي اي که از آن استفاده مي کنند را به دلخواه خود تغيير دهند و بدين ترتيب ارزش بيشتري نزد کارفرمايان پيدا کنند.

 

کدنويسي مربوط به داده هاي بزرگ است و مسلط شدن بر اين داده ها مي تواند شروع يک پروژه را از شکست به موفقيت تغيير دهد.

 

يک کدنويس تازه کار بهتر است بر روي درک کدها و چگونگي کار با آنها تمرکز کند. کمپاني ها بطور معمول از ديتابيس هاي اطلاعاتي قوي نظير تحليل و بررسي ها، شبکه هاي اجتماعي و ثبت کننده فعاليت ها برخوردار هستند و شما بايد بتوانيد از اين اطلاعات براي ايجاد يک فرآيند که توانايي عملکرد سريع بر روي آنها و ارائه ي يک خروجي مناسب را دارد، استفاده کنيد.

 

Meouchy يکي از اعضاي تيم نظرسنجي يک کمپاني فعال در حوزه تحقيق بازار گوشي هاي هوشمند، مي گويد : تازه کارها بايد يادگيري ديتابيس ها و SQL syntax هاي ابتدايي را جزو برنامه هاي خود قرار بدهند. وي توصيه مي کند در هنگام حل مسائل واقعي سعي کنيد طراحی  از پيچيدگي ها فرار کنيد و از همان مباحث پايه در کار خود استفاده کنيد بدين ترتيب هر چقدر که تکنولوژي در اين زمينه پيشرفت کند شما حداقل تا يک دهه نيازي به يادگيري مجدد يک زبان نخواهيد داشت.

 

اين مانند دانستن و تحقيق زياد در مورد تکنيک ها و فناوري هاي جديد در زمينه کدنويسي است، در حالي که شما قابليت پياده سازي آنها را نداريد. بنابراين زماني شما باسواد محسوب مي شويد که بتوانيد چيزي خلق کنيد نه اينکه فقط از آنها مطلع باشيد.

 

 

 

در اين جلسه از آموزش css با ساير گزينشگرهايي که در Css3 معرفي شده اند صحبت خواهيم کرد.

اگر دومين پست از آموزش css را خوانده ايد، با هم درمورد گزينشکرها صحبت کرديم

گفتيم که در css شش نوع گزينشگر براي انتخاب المنتها وجود دارد که يگي از ان ها کلاس هاي کاذب (pseudo-class) بودند، که اين سلکتورها براي نمايش رويدادهاي صفحه از جمله، کليک، هاور، فوکوس و ... استفاده مي شوند. در css کلاس هاي کاذب ديگري نيز وجود دارد که مربوط به طريقه انتخاب فرزندان (child) يک المنت پدراست. ما ميخواهيم در اين جلسه در مورد آن ها توضيح دهيم.

 

<ul>

 

 <li>Lang

 

 

 <li>HTML</li>

 

 

 <li>Javascript</li>

 

 </ul>

 

 </li>

 

 <li>Joomla</li>

 

 <li>Drupal</li>

15

 </ul>

16

 </li>

17

</ul>

حال اگر بخواهيم به هر يک از اين گزينه ها يک رنگ متفاوت اختصاص دهيم، چه ميکرديم؟ حتما براي هر يک class تعريف مي کرديم و رنگ مورد نظر را انتخاب مي کرديم. خب اين روش درست است اما اگر ندانيم class آن چيست چطور؟ اگر سايت دايناميک باشد، و اين اطلاعات بعدا اضافه شود 

 

last-child

حال به تعريف دقيقتر اين کلاس هاي کاذب مي پردازيم :

 

nth-child(n) و nth-last-child(n)

 

 

nth-child(n) : با استفاده از اين کلاس کاذب مي توان براي تک تک المنت هاي يک صفحه وب، بدون استفاده از id يا class براي آن ها يک استايل متفاوت تعيين کنيم.

 

به کد css زير دقت کنيد تا متوجه شويد چگونه ميتوانيم به هر يک از li هاي کد html بالا استايل متفاوت دهيم.

1

ul li {

2

 color: blue;

3

 font: 24px tahoma;

 

5

}

6

 

7

ul li:nth-child(1){color: red;}

8

ul li:nth-child(2){color: green;}

9

ul li:nth-child(1) li:nth-child(1){color: orange;}

10

ul li:nth-child(1) li:nth-child(2){color: brown;}

11

ul li:nth-child(1) li:nth-child(3){color: pink;}

12

ul li:nth-child(2) li:nth-child(1){color: gray;}

13

ul li:nth-child(2) li:nth-child(2){color: silver;}

14

 

البته در مروگر ie فقط از نسخه 9+ کار ميکند.

 

 

کلاس کاذب nth-last-child(n) برعکس nth-child(n) عمل ميکند، به اين صورت که از اخر به شمارش المنت ها ميپرداز.

اگر nth-last-child را جايگزين nth-child در کد css بالا کنيم نتيجه کد به شکل زير خواهد بود.

 

first-child و last-child

 

 

همانطور که از اسم کلاس ها معلومه first-child اولين فرزند از يک المنت پدر last-child آخرين فرزند از يک المنت پدر رو انتخاب ميکنند.

کد css زير را به کدهاي css بالا اضافه کنيد

1

ul li:first-child li {font-size: 18px;}

2

ul li:last-child li {font-size: 14;}

نتيجه

 

ديگر کلاس هاي کاذب

 

 

selection : اين کلاس کاذب استايل المنت را هنگامي که ان را انتخاب ميکنيم، (در حالي که کليک چپ رو نگه داشتيم روي المنت ميکشيم يا CTRL + A ( در حالت پيشفرض مرورگرها

هنگامي که به طور مثال متني رو انتخاب ميکنيم، رنگ متن سفيد، و پس زمينه ان آبي ميشود. ما توانيم با استفاده از اين کلاس کاذب اين رنگ را هر کدام از المنتها تغيير دهيم يا ان را براي کل صفحه تعيين کنيم.

کد css :

1

::selection {

2

 background: #999;

3

 color: #edb;

4

}

5

 

6

::-moz-selection {

7

 background: #999;

 

 color: #edb;

9

}

 

 

 

::-webkit-selection {

12

 background: #999;

13

 color: #edb;

14

}

المنت هاي کاذب (pseudo-elemnt)

 

 

بعلاوه کلاس هاي کاذبي که گفتيم، المنت هاي کاذب نيز وجود دارند.

::first-letter تغيير استايل اولين کاراکتر از يک متن.

کد html :

1

<p>7lea: javascript and web design tutarials</p>

کد css :

 

p::first-letter {font-size: 36px;}

 

 

::first-line تغيير استايل اولين خط از يک متن.

 

 

<p>7lea: javascript and web design tutarials<br>7lea: javascript and web design tutarials</p>

کد css :

 

 

p {font-size: 20px;}

 

p::first-line {font-size: 36px;}

بسيار خب آموزش اين جلسه نيز به پايان رسيد در جلسه بعدي به معرفي گزينشگرهاي صفت (attribute) و باقي گزينشگرها ميپردازيم.

 

Overview

What's included Preview

Reviews

Do you want to lea how to use WordPress for web design? Do you want to start a freelance career in web design, but thought you couldn't because you're not a developer? Did you know that over 13% of the 1,000,000 biggest websites on the inteet run on WordPress? Whether you've been dreaming about designing your own

specializing in WordPress, and also other fundamentals such as: what web hosting is, why Firefox is a web designer's best friend, and even how to edit images!

 

The course is is made up of 7 easy-to-follow lessons, including articles, video tutorials, and interaction! You'll get your interactive practice time through simple homework plans where you'll actually try doing what you've leaed in the tutorials. My objective is to make web design easy to understand, and I use real-world analogies to explain technical jargon to help you make sense of some of the fundamental concepts you need to understand in order to be a successful web designer.

 

 

 

What you'll lea

Setting up hosting

Installing WordPress

How to edit images

 

 

همانطوري که قطعا مي دانيد، الگوريتم هاي موتورهاي جستجو جهت جلوگيري از سوء استفاده ي کاربران و وب مسترها، مخفي هستند تا در هنگام طراحي سايت و يا بروز رساني وب سايت ها، صحت کيفيت نتايج جستجوي ارائه شده از سوي موتورهاي جستجو، مورد آسيب قرار نگيرد؛ بنابراين چگونه مي توان ملاک هاي کيفي جهت قرار گرفتن در رتبه هاي بالاتر در رده بندي موتورهاي جستجو را دانست؟

البته از بين راه حل هاي فوق، گزينه ي حدس، تست و خطا، بسيار کاربردي تر بوده و در نهايت منجر به نتايج بسيار تاثيرگذارتري مي شود، چون بصورت علمي و بر اساس بررسي ها و تست و خطاهاي مختلف، گزينه ها و ملاک هاي بهبود سئوي سايت کشف شده و به کار گرفته مي شوند.

 

بدون شک يکي از بررسي هايي که موتورهاي جستجو در مورد وب سايت ها انجام مي دهند؛ شناسايي شخصيت و هويت آن وب سايت و بررسي ميزان اصالت آن هست؛ اينکه وب سايت شما باهويت يک وب سايت دايناميک يا استاتيک، خبري يا آموزشي، کپي کار و يا ارائه دهنده ي مطالب اصيل و … شناخته شود، تاثير بسزايي در ميزان و نحوه ي ارسال بازديدکنندگان توسط موتورهاي جستجو به وب سايت شما خواهد داشت.

 

قالب اختصاصي و اصالت يک وب سايت

بدون شک، يکي از پارامترهايي که کاربران يک وب سايت آن را بر همان اساس ارزيابي مي کنند، اين هست که آيا وب سايت مربوطه يک طراحي اختصاصي دارد يا خير؟ و در اينجا با توجه به تجربيات پيشين، و مشاهده ي افزايش بازديد وب سايت هايي که قالب هاي اختصاصي استاندارد و با کيفيتي دارند، اين حدس را ميتوانيم بزنيم که گوگل با بررسي کدهاي خروجي وب سايت شما، ميتواند ميزان اصالت سايت شما را شناسايي کند و نتيجه ي آن را در نتايج جستجوي خودش و ارزيابي سئوي سايت شما، ترتيب اثر دهد. البته ناگفته نماند که يکي از علل افزايش بازديد (بخصوص در مورد page views) وب سايت هايي که براي آن ها طراحي قالب اختصاصي انجام شده است، اين هست که در طي فرآيند طراحي يک قالب اختصاصي، دقيقا همه چيز مطابق نياز همان سايت طراحي و پياده سازي مي شود.

داک تايپ DocType  : Document Type Definition 

 

 

اولين آيتم صفحه است بدون فاصله. اين يک قانون است.

همانطوري که فايل word 2007 در نمايش در 2000 دچار مشکل مي شود HTML ها با داک تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.

در واقع اين داک تايپ است که به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.

داک تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5  که به تازگي مطرح شده است.

براي ديدن داک تايپ هاي موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes

 

 

 

    <!DOCTYPE  html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

 

به کدهاي داک تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي که بايد به اين نوع سند در وب سايت کنسرسيوم جهاني وب World Wide Web Consortium يا W3C ، اشاره کند کدام است.

در حال حاضر دو نوع داکتايپ هستند که استفاده بيشتري دارند Transitional  و  Strict

همانطوري که گفتم فعلا دنبال تفاوت اين داک تايپ ها نباشيد به آن هم خواهيم رسيد .

تاکيد ميکنم : اولين آيتم صفحه است بدون فاصله. اين يک قانون است.

 

 

 

عناصر HTML  :

 

 

قبل از اين که عناصر HTML را شرح دهم بايد با مفهوم تگ (tag)  آشناشويد. تگ يعني اسمي که ميان اين دو <> قرار گيرد و نام تگ همان متني است که بين اين دو <> قرار مي گيرد

 

    تگ HTML    <html>

    تگ HEAD   <head>

 

 

تگ ها مي توانند شامل چند attribute  (ويژگي) باشند:

 

    <html   xmlns="http://www.w3.org/1999/xhtml "  dir="rtl" >

 

 

dir يک نام  attribute است و rtl ، value (مقدار) آن است که بين " " قرار گرفته است.

 

 

design-web-09.gif  

 

تگ ها به دودسته container و empty  تقسيم مي شوند.تگ هاي container شامل يک تگ بازشونده و يک تگ بسته شونده هستند به مثال بالا دقت نماييد HTML  باز شده و بسته شده است. تگهاي empty  متفاوت هستند مانند مثال زير

 

    <img src="images/test.jpg" alt="test" />

    <br/>

 

 

تگ هاي empty  را مي توان به صورت container استفاده کرد ولي در داک تايپ هاي xhtml توصيه شده است که تگ هاي empty را به همان شکل empty  بنويسيم

در استفاده از تگ ها بايد دانيد که از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty  بنويسيم دچار error مي شويم.

نگران نباشيد کم کم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو کنيم :

 

    empty tag in html

 

 

بسيار عالي شما هم اين نتايج را پيدا کرديد :

 

    • <br/>

    • <hr/>

    • <meta/>

    • <base/>

    • <link/>

    • <meta/>

    • <img/>

    • <embed/>

    • <area/>

    • <input/>

    • 

 

اين را گفتم که هيچ وقت دنياي وب و جستجو را فراموش نکنيد.

 

 

غير از داک تايپ ها تمامي عناصر صفحه داخل تگ HTML است که شامل 2 بخش مي شود head و  body

 

 

عنصر HAED

 

 

اين يک تگ container  است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css  و .....

 

    <head>

    <title>Untitled Document</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

 

عنصر  title :

 

 

يک تگ container است که متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :

 

به تايتل درسايت بنده توجه کنيد :

 

 

 

design-web-10.gif 

موارد استفاده ديگر:

 

 

• اين تايتل در زمان مينيمايز کردن پنجره در taskbar windows قابل مشاهده است

• در زمان بوکمارک کردن صفحه با اين عنوان  در ليست ما ذخيره مي شود

• براي معرفي آن صفحه است

• براي موتورهاي جستجو هم حائز اهميت مي باشد چيزي که در بهينه سازي وب سايت  وب اسکالا هم استفاده شده است

 

 

 

عنصر meta  :

 

 

متا تگ يک تگ empty است و براي  دلايل متفاوتي استفاده مي شوند اطلاعات اضافي که در مرورگر نمايش پيدا نمي کند . به طور مثال براي نام نويسنده ويا حق کپي رايت و يا نوع کاراکتر و ....

Css و  javascript  هم در  head قرار ميگيرند که بنا به نياز استفاده ميشوند البته براي جاوااسکريپت ميتوان يک تفاوتهايي  در طراحي هاي حرفه اي  قائل شد. به طور مثال سورسي که در طراحي سايت فوق استفاده شده است را مشاهده نماييد. جاوا اسکريپت در پايين صفحه درج شده است.

 

 

 

عناصر body :

 

 

هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و .......

 

 

آيا ساختن يک صفحه کافي است؟

 

در قسمت هاي گذشته ساخت يک صفحه از وب سايت را آموختيم و حالا مي خواهيم چند صفحه را در کنار هم داشته باشيم و بين آن ها با لينک دهي حرکت کنيم . در واقع اين يک workshop براي جمع آوري اندوخته هاي شماست .

در ابتدا صفحه اي با نام index.html  مي سازيم:

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Bubble Under - The diving club for the south-west

    UK</title>

    <meta http-equiv="Content-Type"

    content="text/html; charset=utf-8"/>

    </head>

    <body>

    <div id="header">

    <div id="sitebranding">

    <h1>BubbleUnder.com</h1>

    </div>

    <div id="tagline">

    <p>Diving club for the south-west UK - let's make a

    splash!</p>

    </div>

    </div> <!-- end of header div -->

    <div id="bodycontent">

    <h2>Welcome to our super-dooper Scuba site</h2>

    <p><img src="divers-circle.jpg"

    alt="A circle of divers practice their skills"

    width="200" height="162"/></p>

    <p>Glad you could drop in and share some air with us! You've

    passed your underwater navigation skills and

    successfully found your way to the start point - or in

    this case, our home page.</p>

    </div> <!-- end of bodycontent div -->

    </body>

    </html>

 

 

نحوه ساخت و تگهاي استفاده شده در مثال فوق قبلا توضيح داده شده است . (سورس تگ  img را با تصويري در کامپيتر خود پر کنيد)

حالا در فلدري که صفحه شما وجود دارد از فايل index.html مي بايست 2 بار کپي بگيريد . بدين ترتيب:

 

بعد از انتخاب فايل

 

    edit > copy

 

 

و سپس  2 بار

 

    Edit > paste

 

 

را مي زنيد حالا 3 فايل مشابه داريد که مي بايست 2 تاي کپي شده را تغيير نام دهيم براي همين روي آنها کليک راست ماوس را فشار مي دهيم و گزينه يrename  را مي زنيم تا بتوانيم نام دلخواه را به آن ها بدهيم.  يکي را  contact.html  و ديگري را  about.html  نام گذاري مي کنيم .

محتواي 3 صفحه فوق يکسان است و مي بايست محتواي صفحات را ويرايش کنيد تا با هم يکي نباشد براي اين کار صفحات دوم وسوم را با ابزار هايي که توضيح داده شده است مثل NotePad باز کنيد و تايتل و محتواي هر صفحه را نسبت به نام آن تغيير دهيد . به طور مثال عبارت contact us را براي تگ تايتل در صفحه contact.html انتخب نماييد.

بعد از تغييرات در 2 صفحه موجود آن ها را  save  کنيد . ( روش save کردن در جلسات گذشته توضيح داده شده است)

 

لينک کردن صفحات به هم:

 

صفحه اول يا همان index را باز کنيد و سعي کنيد از آن به صفحه contact  برويد!

بله اين امکان در حال حاضر وجود ندارد و براي حرکت بين صفحات مختلف شما مي بايست از link و يا anchor استفاده نماييد.

 

    <a href="filename.html">Link text here</a>

 

 

href  :  يک attribute است و بيان کننده آدرسي است که قرار است به آنجا لينک شود

filename.html: نام صفحه ايست که قرار است به آنجا لينک شود

Link text here: چيزي که در صفحه html ديده مي شود و نام لينک مورد نظر است

 

اين نکته را هرگز فراموش نکنيد که از کلمات با معني براي لينک دهي استفاده نماييد و از کلماتي مانند "اينجا را کليک نماييد" پرهيز کنيد.

 

حالا بايد براي لينک دهي بين صفحات يک منو و يا navigation سايت را بسازيم . دقت نماييد نحوه ساخت navigation سايت بسيار مهم است و ساختاري که در ادامه توضيح داده مي شود ساختاري مناسب و استاندارد براي منوي سايت مي باشد و بهتر است الان نگران ظاهر آن نباشيد در ادامه مقالات ظاهر آن را زيبا مي کنيم!

 

ساخت يک منويnavigation 

 

    <div id="navigation">

      <ul>

         <li><a href="index.html">Home</a></li>

         <li><a href="about.html">About Us</a></li>

         <li><a href="contact.html">Contact Us</a></li>

      </ul>

    </div> <!-- end of navigation div -->

 

 

حالا کد زير را در بالاي همه صفحات بعد از تگ div  با آي دي header    اضافه نماييد . به طور مثال براي صفحه index

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Bubble Under - The diving club for the south-west

    UK</title>

    <meta http-equiv="Content-Type" content="text/html;

    charset=utf-8"/>

    </head>

    <body>

    <div id="header">

    <div id="sitebranding">

    <h1>BubbleUnder.com</h1>

    </div>

    <div id="tagline">

    <p>Diving club for the south-west UK - let's make a

    splash!</p>

    </div>

    </div> <!-- end of header div -->

    <div id="navigation">

    <ul>

    <li><a href="index.html">Home</a></li>

    <li><a href="about.html">About Us</a></li>

    <li><a href="contact.html">Contact Us</a></li>

    </ul>

    </div> <!-- end of navigation div -->

    <div id="bodycontent">

    <h2>Welcome to our super-dooper Scuba site</h2>

    <p><img src="divers-circle.jpg" width="200" height="162"

    alt="A circle of divers practice their skills"/></p>

    <p>Glad you could drop in and share some air with us!

    You've passed your underwater navigation skills and

    successfully found your way to the start point - or in

    this case, our home page.</p>

    </div> <!-- end of bodycontent div -->

    </body>

    </html>

 

 

حالا به راحتي مي توانيد بين 3 صفحه حرکت نماييد.

 

نکته نويسنده: بهترين مکان براي قرارگيري منوي سايت هم از لحاظ ظاهر و هم در ساختار html بالاترين نقطه صفحه است. مطمئن باشيد اين به نفع شماست!